<template>
    <div class="w-screen h-screen bg-[rgb(29,67,89)]">
        <div
            class="md:w-[85vw] md:h-[90vh] w-screen h-screen md:bg-[url('@/assets/imgs/login_two.jpg')] bg-[url('@/assets/imgs/login_bg_phone.png')] bg-no-repeat md:bg-[90%_100%] bg-cover md:absolute md:right-[15%] md:top-1/2 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 md:rounded-[20px] md:bg-white flex md:block items-start justify-center">
            <div
                class="md:w-[25vw] w-[70%] h-[60%] md:absolute md:right-[15%] md:top-1/2 md:-translate-y-1/2 pt-[15%] md:pt-0">
                <h1 class="text-center md:text-[45px] text-[30px] md:text-[rgb(81,100,115)] text-white md:mb-10">登录</h1>

                <div class="my-[10px]">
                    <div class="my-5 md:my-[20px]">
                        <span
                            class="block mx-5 font-thin md:text-[rgb(81,100,115)] text-[rgb(113,129,141)]">使用邮箱或者手机号</span>
                        <input type="text"
                            class="w-full rounded-[40px] px-5 box-border text-xl font-thin md:h-[60px] h-[30px] md:border-[rgb(214,222,228)] border-[rgb(113,129,141)] border bg-transparent md:bg-white md:text-black text-white focus:outline-none"
                            v-model="userInfo.account">
                    </div>

                    <div class="my-5 md:my-[20px]">
                        <span class="block mx-5 font-thin md:text-[rgb(81,100,115)] text-[rgb(113,129,141)]">密码</span>
                        <input type="password"
                            class="w-full rounded-[40px] px-5 box-border text-xl font-thin md:h-[60px] h-[30px] md:border-[rgb(214,222,228)] border-[rgb(113,129,141)] border bg-transparent md:bg-white md:text-black text-white focus:outline-none"
                            v-model="userInfo.password">
                    </div>

                    <button @click="Userlogin"
                        class="w-full rounded-[40px] text-white border-0 font-thin mt-[10px] cursor-pointer md:h-[50px] h-[40px] md:bg-[rgb(59,72,89)] bg-[rgb(235,95,93)] md:text-xl text-base">登
                        录</button>
                </div>

                <div class="w-full my-5 text-center flex items-center justify-center">
                    <span
                        class="flex-1 md:border-b md:border-b-[rgb(214,222,228)] border-b border-b-white max-w-[30%] w-[30%] inline-block"></span>
                    <span
                        class="align-middle mx-5 leading-[0px] inline-block w-[100px] md:text-black text-white">其他方式登录</span>
                    <span
                        class="flex-1 md:border-b md:border-b-[rgb(214,222,228)] border-b border-b-white max-w-[30%] w-[30%] inline-block"></span>
                </div>

                <div class="w-full flex justify-center items-center">
                    <div
                        class="border md:border-[rgb(214,222,228)] border-[rgb(214,222,228)] p-[10px] m-[10px] cursor-pointer md:rounded-[20px] rounded-[15px]">
                        <img src="@/assets/imgs/QQ.png" alt="" class="md:w-[40px] md:h-[40px] w-[35px] h-[35px]">
                    </div>
                    <div
                        class="border md:border-[rgb(214,222,228)] border-[rgb(214,222,228)] p-[10px] m-[10px] cursor-pointer md:rounded-[20px] rounded-[15px]">
                        <img src="@/assets/imgs/WeChat.png" alt="" class="md:w-[40px] md:h-[40px] w-[35px] h-[35px]">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import { useUserStore } from '@/stores/user'
import { ref } from 'vue'
const { login, user } = useUserStore()
const userInfo = ref({
    account: '',
    password: ''
})

const Userlogin = async () => {
    const res = await login(userInfo.value) as any
    if (res) {
        router.push('/')
    }
}
</script>
<style scoped></style>
